<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生列表</title>
    <!-- 1. 引入bs的css样式-->
    <link rel="stylesheet" href="/webjars/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 2. 引入jquery库-->
    <script src="/webjars/jquery/3.6.0/jquery.min.js"></script>
    <!-- 3. 引入bs的js库-->
    <script src="/webjars/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <style>
        .container{
            margin-top: 20px;
        }
        .table{
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <h3>学生列表（Mapper + SpringBoot + Thymeleaf）</h3>
                </h3>
            </div>
            <table class="table table-hover table-striped">
                <tr>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                    <td>住址</td>
                    <td>所在班级</td>
                    <td>操作</td>
                </tr>
                <!-- 列表学生<tr th:each="stud : ${students}">-->
                <tr th:each="stud : ${pr.rows}">
                    <td th:text="${stud.sid}"></td>
                    <td>[[${stud.sname}]]</td>
                    <td th:text="${stud.sex}"></td>
                    <td th:text="${stud.age}"></td>
                    <td th:text="${stud.addr}"></td>
                    <td th:text="${stud.cname}"></td>
                    <td>
                        <a href="#" class="btn btn-info btn-sm" th:onclick="updateUI([[${stud}]])">修改</a>
                        <a th:href="'/student/delete/'+${stud.sid}" onclick="return confirm('您真的要删除吗？')"  class="btn btn-danger btn-sm">删除</a>
                    </td>
                </tr>
            </table>
            <div class="panel-footer text-right">
                <!-- 1. 条件查询导航 -->
                <form class="form-inline" style="float: left" action="/student/search" method="post" name="form1">
                    <input type="hidden" id="page" name="page">
                    <div class="form-group">
                        <input type="text" th:value="${stud?.sname}" class="form-control" name="sname" placeholder="输入学生姓名">
                    </div>
                    <div class="form-group">
                        <input type="text" th:value="${stud?.addr}" class="form-control" name="addr" placeholder="输入学生住址">
                    </div>
                    <select class="form-control" name="cid">
                        <option value="0">所有班级</option>
                        <option th:each="c : ${classes}" th:value="${c.cid}" th:selected="${c.cid==stud?.cid}">[[${c.cname}]]</option>
                    </select>
                    <button type="submit" class="btn btn-default btn-sm">查询</button>
                    <button type="button" class="btn btn-success btn-sm" onclick="addUI()">添加学生</button>
                </form>

                <!-- 2. 分页导航 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li id="first">
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <!--下面的语法可以直接遍历数字 -->
                        <li th:each="p : ${#numbers.sequence(1,pr.totalPage)}" th:class="${p == pr.page ? 'active' : ''}">
                            <a href="#" th:onclick="skipPage([[${p}]])">[[${p}]]</a>
                        </li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
                百年智2022.
            </div>
            <!-- 添加或修改的Modal -->
            <div class="modal fade" id="myModal">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="title">添加学生</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal" name="form2" action="/student/add" method="post">
                                <input type="hidden" name="sid" id="sid">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生姓名</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="sname" id="sname" placeholder="请输入姓名">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">学生性别</label>
                                    <div class="col-sm-10">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="sex" id="sex1" value="男">男
                                            </label>
                                            <label>
                                                <input type="radio" name="sex" id="sex2" value="女">女
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" >学生年龄</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="age" id="age" placeholder="请输入年龄">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" >学生住址</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" name="addr" id="addr" placeholder="请输入住址">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label" >所在班级</label>
                                    <div class="col-sm-10">
                                        <select class="form-control" name="cid" id="cid">
                                            <option value="0" >所有班级</option>
                                            <option th:each="c : ${classes}" th:value="${c.cid}" >[[${c.cname}]]</option>
                                        </select>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
    // $(function(){
    //     //1. 得到总页数
    //     let totalPage = [[${pr.totalPage}]]
    //     let page = [[${pr.page}]]
    //     //2. 遍历总页数
    //     //2.1 定义一个字符串用于存储分页的导航信息
    //     let info = ""
    //     for (let i = 1;i <= totalPage;i++){
    //         let b = i == page ? "active":""
    //         info += "<li class="+ b + ">"
    //         // info += "<a href='findByPage?page="+ i +"&pageSize=3'>"+ i +"</a>"
    //         info += "<a href='javascript:void(0)' onclick=skipPage("+i+")>"+ i + "</a>"
    //         info += "</li>"
    //     }
    //     //2.2 将上面的字符串设置给过first后面的位置
    //     $("#first").after(info)
    // })

    //2. 点击分页按钮跳转到某一页上
    function skipPage(page) {

        $("#page").val(page);
        document.form1.submit();
    }

    //1. 添加学生
    function addUI() {
        //1. 修改标题
        $("#title").html("添加学生")
        //2. 清空表单
        document.forms[1].reset()
        // document.form2.reset()
        //2. 显示模态框
        $('#myModal').modal('show')
    }

    //2. 修改学生
    function updateUI(stud) {
        console.log(stud)
        //2.1 为表单元素赋值
        $("#sname").val(stud.sname)
        $("#age").val(stud.age)
        $("#addr").val(stud.addr)
        $("#cid").val(stud.cid)
        $("#sid").val(stud.sid)         //为表单隐藏域赋值，是判断添加还是修改操作的关键
        $("#sex1").prop("checked",stud.sex == '男' ? true : '')
        $("#sex2").prop("checked",stud.sex == '女' ? true : '')
        //2.2 修改标题
        $("#title").html("修改学生")
        //2.3 显示模态框
        $('#myModal').modal('show')
    }
    //3. 提交表单
    function save() {
        //3.1 根据sid是否有值，确定url地址
        let url = "/student/add"
        if ($("#sid").val()){
            url = "/student/update"
        }
        //3.2 修改表单的action值
        document.forms[1].action = url;
        //3.3 提交表单
        document.forms[1].submit()

    }
</script>